import React, { Component, Suspense } from "react";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { connect } from "dva";
import PageLoading from "@/components/PageLoading";
import { FormattedMessage } from "umi-plugin-react/locale";
import { Row, Col, Card, Icon, Table, Form, Spin, Modal, Button, message, Tooltip, Tabs, Pagination } from "antd";
import { routerRedux } from "dva/router";
import styles from "./index.less";
import pen from "@/assets/icons/bi.png";
import deleteimg from "@/assets/buttonimg/delete.png";
import UserSession from "@/UserSession";
import { fetchDetailDisable } from '@/services/knowledgemanagement';
const FormItem = Form.Item;
const { TabPane } = Tabs;

@connect(({ process, loading }) => ({
	process,
	loading: loading.effects["antistopReply/fetch"],
}))
class AntistopReply extends Component {
	state = {
		total: 0,
		dataSource: [],
		pageSize: 10,
		page: 1,
		tabKey: "1",
	};

	// eslint-disable-next-line react/sort-comp
	fetch = (page, limit) => {
		this.setState({ login: true, });
		const { match: { params: { id }, }, route, location: { params }, dispatch, currentUser } = this.props;
		const { tabKey } = this.state;
		this.reqRef = requestAnimationFrame(() => {
			dispatch({
				type: "antistopReply/fetch",
				payload: {
					current: page,
					size: limit,
					robotId: currentUser.robotId,
					rootCategoryId: id,
				},
				callback: (res) => {
					let temp = res.records;
					temp.map((item, index) => (item["key"] = index));
					this.setState({ dataSource: temp, total: res.total, login: false, });
				},
			});
		});
	};

	componentDidMount() {
		this.fetch();
	}

	handleDelete = (item) => {
		const { match: { params: { id }, }, dispatch } = this.props;
		const { tabKey } = this.state;
		let url = `/knowledgeDesign/myKnowledge/${id}/keywordReply/edit/${item.id}`;
		dispatch(routerRedux.push({ pathname: url, }));
	};

	onChangeA = (val) => {
		// 页数选择
		this.setState({ page: val }, () => {
			this.fetch(val, this.state.pageSize);
		});
	};

	// 每页显示多少条数据
	onShowSizeChangeA = (current, pageSize) => {
		this.setState({ pageSize: pageSize, page: current }, () => {
			this.fetch(current, pageSize);
		});
	};

	render() {
		const { tabKey } = this.state;
		return (
			<Suspense fallback={<PageLoading />}>
				<PageHeaderWrapper>
					<Card bordered={false} style={{ height: 'calc(100vh - 157px)' }} bodyStyle={{ paddingBottom: 10 }}>
						<div className={styles.backgroundp}>
							<div className={styles.fromColumn}>
								<div className='zdyButtonA'>
									<Button onClick={this.enumeration} type='primary' icon='plus'>
										<FormattedMessage id='app.antistopReply.addAntistopRevert' defaultMessage='add' />
									</Button>
								</div>
							</div>
							{this.lessdata()}
						</div>
					</Card>
				</PageHeaderWrapper>
			</Suspense>
		);
	}

	enumeration = () => {
		// '/knowledge/antistopReply/edit'
		const { match: { params: { id }, }, dispatch } = this.props;
		let pathname = "/knowledgeDesign/myKnowledge/" + id + "/keywordReply/add";
		dispatch(routerRedux.push({ pathname, query: { id: "tcx" } }));
	};

	handleStop = async (item, type) => {
		const res = await fetchDetailDisable({ id: item.id, disabled: type });
		console.log(res);
		if (res.code === 0) {
			message.info('操作成功');
			this.fetch();
		}
	}

	handleDeletes = (item) => {
		Modal["confirm"]({
			title: `删除【${item.modelName}】任务`,
			content: "确定删除吗？",
			okText: "删除",
			cancelText: "取消",
			onOk: () => {
				const { dispatch, currentUser } = this.props;
				this.reqRef = requestAnimationFrame(() => {
					dispatch({
						type: "antistopReply/fetchd",
						payload: { id: item.id },
						callback: (res) => {
							message["info"](`${res.message}`);
							this.fetch();
						},
					});
				});
			},
			onCancel() { },
		});
	};

	lessdata = () => {
		const { tabKey } = this.state;
		const { currentUser } = this.props;
		let columns = [
			{
				title: "实体名称",
				width: "calc(40vw)",
				dataIndex: "modelName",
			},
			{
				title: "发布状态",
				width: "calc(10vw)",
				dataIndex: "disabled",
				render: text => {
					if (text) {
						return '禁用'
					} else {
						return '启用'
					}
				}
			},
			{
				title: "操作",
				width: "calc(20vw)",
				render: (text, item) => {
					return (
						<div className={styles.pb}>
							<div className={styles.buttongl} onClick={(text) => this.handleDelete(item)}>
								<img style={{ marginRight: 5 }} src={pen} />
								<span style={{ marginBottom: 1 }}>
									<FormattedMessage id='app.customDictionary.edit' defaultMessage='Edit' />
								</span>
							</div>
							{item.disabled ? (
								<div style={{ marginLeft: 10, background: "#4A8DF0" }} className={styles.buttongl} onClick={() => this.handleStop(item, false)}>
									<Icon type="caret-right" style={{ marginRight: 6 }} />
									<span style={{ marginBottom: 1 }}>启用</span>
								</div>
							) : (
								<div style={{ marginLeft: 10, background: "#FE866E" }} className={styles.buttongl} onClick={() => this.handleStop(item, true)}>
									<Icon type="stop" style={{ marginRight: 6 }} />
									<span style={{ marginBottom: 1 }}>停用</span>
								</div>
							)}
							<div style={{ marginLeft: 10, background: "#e8313b" }} className={styles.buttongl} onClick={() => this.handleDeletes(item)}>
								<img src={deleteimg} style={{ marginRight: 5 }} />
								<span style={{ marginBottom: 1 }}>
									<FormattedMessage id='app.customDictionary.out' defaultMessage='out' />
								</span>
							</div>
						</div>
					);
				},
			},
		];
		if (currentUser.tenantId == 2) {
			columns = [
				{
					title: "实体名称",
					width: "calc(40vw)",
					dataIndex: "modelName",
				},
				{
					title: "发布状态",
					width: "calc(10vw)",
					dataIndex: "disabled",
					render: text => {
						if (text) {
							return '未发布'
						} else {
							return '已发布'
						}
					}
				},
				{
					title: "操作",
					width: "calc(20vw)",
					render: (_, item) => {
						return (
							<div className={styles.pb}>
								<div className={styles.buttongl} onClick={() => this.handleDelete(item)}>
									<img style={{ marginRight: 5 }} src={pen} />
									<span style={{ marginBottom: 1 }}>
										<FormattedMessage id='app.customDictionary.edit' defaultMessage='Edit' />
									</span>
								</div>
								{item.disabled ? (
									<div style={{ marginLeft: 10, background: "#4A8DF0" }} className={styles.buttongl} onClick={() => this.handleStop(item, false)}>
										<Icon type="caret-right" style={{ marginRight: 6 }} />
										<span style={{ marginBottom: 1 }}>发布</span>
									</div>
								) : (
									<div style={{ marginLeft: 10, background: "#FE866E" }} className={styles.buttongl} onClick={() => this.handleStop(item, true)}>
										<Icon type="stop" style={{ marginRight: 6 }} />
										<span style={{ marginBottom: 1 }}>取消发布</span>
									</div>
								)}
								<div style={{ marginLeft: 10, background: "#e8313b" }} className={styles.buttongl} onClick={() => this.handleDeletes(item)}>
									<img src={deleteimg} style={{ marginRight: 5 }} />
									<span style={{ marginBottom: 1 }}>
										<FormattedMessage id='app.customDictionary.out' defaultMessage='out' />
									</span>
								</div>
							</div>
						);
					},
				},
			];
		};
		if (tabKey == 2) {
			columns = [
				{ title: "实体名称", width: "calc(40vw)", dataIndex: "modelName", },
				{
					title: "发布状态",
					width: "calc(10vw)",
					dataIndex: "disabled",
					render: text => {
						if (text) {
							return '禁用'
						} else {
							return '启用'
						}
					}
				},
				{
					title: "操作",
					width: "calc(20vw)",
					render: (_, item) => {
						return (
							<div className={styles.pb}>
								<div className={styles.buttongl} onClick={() => this.handleDelete(item)}>
									<img style={{ marginRight: 5 }} src={pen} />
									<span style={{ marginBottom: 1 }}>编辑</span>
								</div>
								{item.disabled ? (
									<div style={{ marginLeft: 10, background: "#4A8DF0" }} className={styles.buttongl} onClick={() => this.handleStop(item, false)}>
										<Icon type="caret-right" style={{ marginRight: 6 }} />
										<span style={{ marginBottom: 1 }}>启用</span>
									</div>
								) : (
									<div style={{ marginLeft: 10, background: "#FE866E" }} className={styles.buttongl} onClick={() => this.handleStop(item, true)}>
										<Icon type="stop" style={{ marginRight: 6 }} />
										<span style={{ marginBottom: 1 }}>停用</span>
									</div>
								)}
							</div>
						);
					},
				},
			];
		};

		return (
			//主页
			<div className='tableyc'>
				<Spin spinning={this.state.login} style={{ overflow: 'unset' }}>
					<Table
						className='zdyTable'
						columns={columns}
						key='_id'
						dataSource={[...this.state.dataSource, ...this.state.dataSource, ...this.state.dataSource, ...this.state.dataSource]} //数据
						onChange={this.handleChange}
						scroll={{ y: 560 }}
						pagination={false}
					/>
					{this.state.total ? (
						<Pagination
							style={{ textAlign: 'right', marginTop: 16 }}
							total={this.state.total}
							pageSize={this.state.pageSize}
							current={this.state.page}
							// showSizeChanger={true}
							showQuickJumper={true}
							onChange={this.onChangeA}
							// onShowSizeChange={this.onShowSizeChangeA}
						/>
					) : null}
				</Spin>
			</div>
		);
	};
}

export default connect(({ user }) => ({
	// 全局数据
	currentUser: user.currentUser,
}))(Form.create()(AntistopReply));
